<template>
  <div class="details">测评概况</div>
  <div class="details-text">诊断标签：再不努力来不及了</div>
  <div class="details-echarts">
    <div class="echartslist">
      <Bingtu :rotesData="props.rotesData" />
      <!-- 饼图 1-->
      
    </div>
    <div class="echartslist">
      <ZhuZhuangTu  :typesArray="props.typesArray"  :scoresArray="props.scoresArray"></ZhuZhuangTu>
      <!-- 柱状图2 -->
    </div>
    <div class="echartslist">
      <!-- 主状图 3-->
      <ZhuZhuangtu2  :avgTates="props.avgTates" ></ZhuZhuangtu2>
    </div>
  </div>

  <div class="tablelistname">
    <a-table
      :pagination="false"
      :data="props.table1"
      :style="{ width: '100%', height: '95%' }"
     
      :bordered="false"
    >
      <template #columns>
        <a-table-column
          title="题型"
          align="center"
          data-index="TypesName"
        ></a-table-column>
        <a-table-column
          title="分值"
          align="center"
          data-index="totalScore"
        ></a-table-column>
        <a-table-column
          title="得分"
          align="center"
          data-index="getScore"
        ></a-table-column>
        <a-table-column
          title="试题数"
          align="center"
          data-index="testNum"
        ></a-table-column>
        <a-table-column
          title="答对"
          align="center"
          data-index="testRightNum"
        ></a-table-column>
        <a-table-column
          title="个人正确率"
          align="center"
          data-index="testRight"
        ></a-table-column>
        <a-table-column
          title="平均正确率"
          align="center"
          data-index="avgScoreRates"
        ></a-table-column>
        <!-- <a-table-column title="导师" align="center" data-index="name">
          <template #cell="{ record }">
            <span class="practice">开始练习</span>
          </template>
        </a-table-column> -->
      </template>
    </a-table>
    <div class="table-text">注：常模是一种供比较的标准量数，由标准化样本测试结果及试题难度预估算法计算而来。</div>
  </div>
  <div class="Score-increase">
    <div class="echatys">
      <img src="/img/echarts.png" alt="" />
    </div>
    <div class="echatys-rig">
      <div class="nulecenter">
        <div class="nulecenter-text">
          预测第一提分空间 <span class="nulecenter-span"> {{props.avgSubRotes}}</span> 分
        </div>
        <div class="nulecenter-body">
          根据本次诊断分析结果，结合历年考点考法大数据，精准推荐快速有效提分的考点考法课程。通过学习相关课程后，如果掌握了对应的考点考法，具备了考试要求的关键能力，能够在考试中提升{{props.avgSubRotes}}分!
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Bingtu from "./echarts/bing.vue";
import ZhuZhuangTu from "./echarts/zhuzhuangtu.vue";
import ZhuZhuangtu2 from "./echarts/zhuzhuangtu2.vue";
import { ref, reactive, onMounted, watch } from "vue";
interface TableItem {
  // 根据实际数据结构定义接口
  // id?: number;
  // name?: string;
  TypesName: string;
  avg: string;
  avgScoreRates: string;
  getScore: string;
  getScoreRates: string;
  testNum: string;
  testRight: string;
  testRightNum: string;
  totalScore: string;
  // 其他字段...
}

const props = defineProps<{
  table1: TableItem[];
  rotesData: {};
  typesArray: [];
  scoresArray: [];
  avgSubRotes:0
  avgTates:[]
}>();

// 使用 props.table1 访问数组数据

onMounted(() => {
  
});
</script>
<style lang="less" scoped>
.details {
  padding-top: 2vw;
  font-size: 17px;
  color: #03305c;
  text-decoration: underline;
  text-decoration-color: #0075ff;
  //   background: linear-gradient(180deg, rgba(0, 117, 255, 0) 0%, #0075ff 100%);
}
.details-text {
  margin-top: 1vw;
  font-size: 15px;
  color: #03305c;
}
.details-echarts {
  margin-top: 2vw;
  display: flex;
  justify-content: space-between;

  flex-wrap: wrap;
}
.echartslist {
  border: 1px solid #ededed;
  padding: 1vw;
  width: 29%;
  height: 260px;
  // background-color: pink;
}
.tablelistname {
  margin-top: 1vw;
}
.table-text {
  margin-top: 1vw;
  font-size: 13px;
  text-align: left;
}
.Score-increase {
  margin-top: 2vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}
.echatys {
  width: 50%;
  height: 60vh;
  img {
    width: 100%;
    height: 100%;
  }
}
.echatys-rig {
  width: 50%;
  // background-color: pink;
  text-align: left;
}
.nulecenter {
  margin: 25% 15% 0 15%;
}
.nulecenter-text {
  font-weight: 500;
  font-size: 15px;
  color: #03305c;
  text-align: left;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.nulecenter-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 7px; /* 下划线的高度，可根据需要调整 */
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, #0075ff 100%);
  /* 上下渐变效果，这里设置上半部分为指定颜色，下半部分透明 */
}
.nulecenter-body {
  margin-top: 10px;
  font-size: 16px;
  line-height: 22px;
}
.nulecenter-span {
  color: #fb6d30;
  font-size: 17px;
}
@media (max-width: 735px) {
  .echartslist {
    border: 1px solid #ededed;
    padding: 1vw;
    width: 100%;
    height: 260px;
  }
  .echatys {
    width: 100%;
    height: 60vh;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .echatys-rig {
    width: 100%;
    // background-color: pink;
    text-align: left;
  }
}
</style>
